<template>
  <div class="main">
    <div class="search">
      <div class="tabs">
        <div
            class="tab"
            v-for="(tab, index) in tabs"
            :key="index"
            :class="{ active: selectedTab === tab }"
            @click="selectTab(tab)"
        >
          {{ tab }}
        </div>
      </div>
      <div>
        <input type="button" id="btnAudit" @click="audit" value="审核选中项" class="btn btn-primary"/>
        &nbsp;
        <input type="button" id="btnRemove" @click="remove" value="移除选中项" class="btn btn-primary"/>
      </div>
    </div>
    <div class="video-list" v-loading="loading">
      <!-- 视频 1 -->
      <div class="video-container" v-for="vd in videoList" :key="vd.id">
        <input type="checkbox" :data-id="vd.id" class="checkbox">
        <video controls>
          <source :src="vd.url" type="video/mp4">
          您的浏览器不支持 HTML5 视频播放。
        </video>
      </div>

    </div>

    <pagination-component :currentPage="currentPage" :total="total" :pageSize="pageSize" @change-page="changePage"></pagination-component>
  </div>



</template>

<script>
  import {listVideo} from "@/api/home";
  import PaginationComponent from '@/components/PaginationComponent.vue';
  import { ElMessageBox } from 'element-plus';

  export default {
    name: "HomeView",
    components: {
      PaginationComponent,
    },
    data() {
      return {
        loading: false,
        currentPage: 1,
        total: 24,
        pageSize: 8,
        videoList: [],
        tabs: ["全部", "高风险", "中风险", "低风险"],
        selectedTab: "高风险", // 默认选中标签
      }
    },
    created() {
      this.getList(1);
    },
    methods: {
      selectTab(tab) {
        this.selectedTab = tab;
        this.getList(1);
      },
      changePage(pageNum) {
        this.getList(pageNum);
      },
      audit(){
        this.$alert(`
  <div style="width:400px">
    <div style="margin-bottom: 10px;">
      <label for="riskSelect" style="font-weight: bold;">选择风险等级:</label>
      <select id="riskSelect" class="el-select el-select--medium" style="width: 100%; padding: 5px; border-radius: 4px; border: 1px solid #dcdfe6;">
        <option value="low-risk">高风险</option>
        <option value="medium-risk">中风险</option>
        <option value="high-risk">低风险</option>
      </select>
    </div>
    <div>
      <input type="text" id="otherInfo" placeholder="请输入其他信息" class="el-input" style="width: 100%; padding: 5px; border-radius: 4px;" />
    </div>
  </div>
`, '审核选中视频', {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '确定',
          callback: () => {
            const riskSelect = document.getElementById('riskSelect');
            const otherInfo = document.getElementById('otherInfo');
            console.log('选择的风险等级:', riskSelect.value);
            console.log('输入的其他信息:', otherInfo.value);
          }
        });

      },
      remove(){
        ElMessageBox.confirm('确认要移除选定视频吗?', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 点击确认执行的逻辑
          const selectedCheckboxes = document.querySelectorAll('.checkbox:checked');
          selectedCheckboxes.forEach(checkbox => {
            const id = checkbox.getAttribute('data-id');
            // 执行移除操作，可以在这里调用移除视频的接口
            console.log('移除视频 ID: ' + id);
          });
        }).catch(() => {
          // 点击取消执行的逻辑
          console.log('取消移除操作');
        });
      },
      getList(pageNum) {
        this.loading = true;
        this.currentPage = pageNum;
        this.videoList = [];
        listVideo(this.currentPage, this.pageSize, this.selectedTab).then(response => {
              this.loading = false;
              this.videoList = response.rows;
              this.total = response.total;
            }
        )
      }
    }
  }
</script>
<style lang="scss" scoped>
  .search {
    display: flex;
    justify-content: space-between; /* 使用 space-between 使内容两端对齐 */
    align-items: center; /* 垂直居中对齐 */
    width: 100%; /* 确保搜索容器占满父级宽度 */
    margin-bottom: 10px;
  }

  .tabs {
    color: #fff;
    display: flex;
    flex-wrap: wrap;
  }

  .tab {
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    color: #606266;
    border: 1px solid #dcdfe6;
    transition: background-color 0.3s;
    box-shadow: none !important;
    border-radius: 0;
  }

  .tab:hover {
    color: #409eff;
  }

  .tab.active {
    background-color: #409eff;
    border-color: #409eff;
    color: #fff;
  }

  .video-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .video-container {
    position: relative;
    width: 300px; /* 每个视频容器的固定宽度 */
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }

  .video-container video {
    width: 100%;
    height: auto;
    display: block;
  }

  .checkbox {
    position: absolute;
    top: 10px;
    right: 10px;
    accent-color: #007BFF; /* 设置复选框颜色 */
    width: 20px;
    height: 20px;
    z-index: 10; /* 提升复选框的层级 */
  }

  @media (max-width: 600px) {
    .video-container {
      width: 100%; /* 手机端每个视频占满宽度 */
    }
  }
</style>
